<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-07 08:43:51
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-07 09:59:23
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<!-- 内部脚本 -->
 <script>
    function add(a,b){
        console.log("🚀 ~ add ~ a+b:", a+b);
        return a+b;
    }
    var c=add(1,2);
    console.log("🚀 ~ c:", c);
    var myAdd = function(a,b){
        return a+b;
      }
    var d=myAdd(1,2);
    console.log("🚀 ~ d:", d);
 </script>
<!-- 外部脚本 -->
<script src="./js/index.js"></script>
<body>
    喜欢的水果:<input id="inputFruit" type="text" placeholder="请输入你喜欢的水果" value="西瓜">
    <br>
    <!-- 给按钮绑定事件 -->
    <input id="btn1" type="button" value="按钮1" onclick="clickBtn1()">
    <input id="btn2" type="button" value="按钮2" onclick="add(2,2)">
    <input id="btn3" type="button" value="按钮3" >
</body>
    <script>
       //获取输入框元素
       var fruitElement=document.getElementById("inputFruit");
       alert("阻塞运行");
       console.log("🚀 ~  fruitElement:",  fruitElement);
       if(fruitElement){
        var friutValue=fruitElement.value;
        console.log("🚀 ~ friutValue:", friutValue);
        switch(friutValue){
            case "苹果":
            alert("用户喜欢苹果");
            break;
            case "西瓜":
            alert("用户喜欢西瓜");
            break;
            }
       }
       function clickBtn1(){
        console.log("btn1被点击");
       }
       //通过id获取按钮元素
       var btn3=document.getElementById("btn3");
       console.log("🚀 ~ btn3:", btn3);
       if(btn3){
        btn3.onclick=function(){
            console.log("btn3被点击");
        }
       }
    </script>
</html>